<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置高度</title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            border: 1px solid #00B7FF;
            padding: 10px;
            margin: 20px;
        }
        p {
            clear: both;
        }
    </style>
</head>
<body>
<button>设置高度</button>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    console.log($("body").length);
    console.log($("button").length);
    console.log($("div", "body").length);
    $("button").on("click", function() {
        // 选择某个特定的集合时，应指定所属范围，否则出现意外结果（如下）；
        // $("div").height(function(index, value) {
        // 正确设置为：$("div", "body")
        $("div", "body").height(function(index, value) {
                /*div number:7index: 0value: 200
                div number:7index: 1value: 200
                div number:7index: 2value: 200
                div number:7index: 3value: 200
                div number:7index: 4value: 1155
                div number:7index: 5value: 1155
                div number:7index: 6value: 1155*/
                $("body").append("<p>div number:" + $("body div").length + "<em>index: " + index + "</em><strong>value: " + value + "</strong></p>");
                return 100;
            });
        $("body").append("<p>" + $("div").height() + "</p>");
    })
</script>
</body>
</html>